<template>
  <div v-horizontal-screen  class="home-view"> 
		<div v-if="!isGame" class="snake-main">
			<v-main-header style="height: 3rem" @gotoExchange="gotoExchange"/>
			<VAnimationContent />
			<div @touchmove.prevent class="main-content">
				<v-rank-list class="content-left" />
				<VFunctionPanel ref="VFunctionPanel" class="content-right" @click-start="handleStartGame"/>
			</div>
		</div>
    <GamePanel v-if="isGame" @goBack="closeGame"/>
  </div>
</template>

<script>
import GamePanel from './game-panel.vue'
import VMainHeader from '@/components/snake-components/main-header/main-header.vue'
import VRankList from '@/components/snake-components/rank-list/rank-list.vue'
import VFunctionPanel from '@/components/snake-components/function-panel/function-panel.vue'
import VAnimationContent from '@/components/home-animation-content/animation-content.vue'

export default {
  name: 'HomeView',
  components: {
    GamePanel,
		VMainHeader,
		VRankList,
		VFunctionPanel,
		VAnimationContent
  },
  directives: {
		'horizontal-screen': {
			bind(el, binding, vnode) {
				// let self = vnode.context;
				function reset(init) {
					let width = document.documentElement.clientWidth,
						height = document.documentElement.clientHeight;
					//在竖屏状态我们通过添加transform:rotate(90deg)，来让这个页面横过来
					if (window.orientation == null || window.orientation === 180 || window.orientation === 0) {//竖屏状态
						el.style.webkitTransform = el.style.transform = `rotate(90deg)`;
						el.style.width = `${height}px`;
						el.style.height = `${width}px`;
						el.style.webkitTransformOrigin = el.style.transformOrigin = `${width / 2}px center`;
						//如果已经处于横屏状态就不做其他处理了
					} else if (window.orientation === 90 || window.orientation === -90) {//横屏状态
						el.style.webkitTransform = el.style.transform = `rotate(0)`;
						el.style.width = `${width}px`;
						el.style.height = `${height}px`;
					}
				}
				reset(true);

				let timer = null;
				el.fn = function (e) {
					clearTimeout(timer);
					timer = setTimeout(reset, 300);
				}

				window.addEventListener('resize', el.fn, false);

				if ("onorientationchange" in window) {
					window.addEventListener('orientationchange', el.fn, false);
				}
			},
			unbind(el, binding, vnode) {
				window.removeEventListener('resize', el.fn, false);
				window.removeEventListener('orientationchange', el.fn, false);
			}
		},
	},
  data() {
    return {
			isGame: false
    }
  },
  created() { },
  mounted() {
  },
  methods: {
		handleStartGame() {
			this.isGame = true
		},
		closeGame() {
			this.isGame = false
		},
		AppTouchmove(e) {
			console.log(e)
		},
		gotoExchange() {
			this.$refs.VFunctionPanel.openGamePropModal()
		}
  }
}
</script>

<style lang="scss">
.snake-main {
	width: 100%;
	height: 100%;
	background: url('@/assets/scss/background.png') 0 0 no-repeat;
	background-size: 100%;
	position: relative;
	.main-content {
		position: absolute;
		width: 100%;
		height: calc(100% - 3rem);
		z-index: 99;
		display: flex;
		overflow: hidden;
	}
	.content-right {
		margin-left: auto;
	}
}
.click-dh {
  transition: transform 0.2s ease; /* 平滑过渡效果 */
  &:active {
    transform: scale3d(0.88, 0.88, 1);
  }
}
</style>